import React, { Component } from 'react'
import './index.less'
import { Form, Input, Button, Row, Col, Select, DatePicker } from 'antd';
import moment from 'moment'
const FormItem = Form.Item;
const Option = Select.Option;
const Textarea = Input.TextArea;

class WeeklyForm1 extends Component {

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.submit(values, {type1: 'data1', type2: 'modifyRecord1', type3: 'modalVisible1'});
      }
    });
  }

  close = () => {
    if (this.props.modifyRecord) {
      this.props.modifyRecord.deliveryPlan = moment(this.props.modifyRecord.deliveryPlan).format('YYYY-MM-DD');
    }
    this.props.close();
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
    };
    return (
      <Form onSubmit={this.handleSubmit} className="weekly-form">
        <Row gutter={40} className="weekly-form-row">
            <Col span={12}>
            <FormItem label="序号" {...formItemLayout}>
                {getFieldDecorator('index', {
                  rules: [{ required: true, message: '请输入序号！' }],
                  initialValue: this.props.modifyRecord.index || this.props.index
                })(
                  <Input placeholder="序号" disabled />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目名称" {...formItemLayout}>
                {getFieldDecorator('name', {
                  rules: [{ required: true, message: '请输入项目名称！' }],
                  initialValue: this.props.modifyRecord.name
                })(
                  <Input placeholder="项目名称" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目编号" {...formItemLayout}>
                {getFieldDecorator('projectOutCode', {
                  rules: [{ required: true, message: '请输入项目编号！' }],
                  initialValue: this.props.modifyRecord.projectOutCode
                })(
                  <Input placeholder="项目编号" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目类型" {...formItemLayout}>
                {getFieldDecorator('projectType', {
                  rules: [{ required: true, message: '请输入项目类型！' }],
                  initialValue: this.props.modifyRecord.projectType
                })(
                  <Input placeholder="项目类型" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="Redmine是否建档" {...formItemLayout}>
                {getFieldDecorator('filing', {
                  rules: [{ required: true, message: '请输入项目名称！' }],
                  initialValue: this.props.modifyRecord.filing || false
                })(
                  <Select allowClear>
                    <Option value={true}>是</Option>
                    <Option value={false}>否</Option>
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目经理" {...formItemLayout}>
                {getFieldDecorator('manager', {
                  rules: [{ required: true, message: '请输入项目经理！' }],
                  initialValue: this.props.modifyRecord.manager
                })(
                  <Select allowClear>
                    {
                      this.props.managerList.map((item, index) =>
                        <Option key={index} value={item.value}>{item.name}</Option>
                      )
                    }
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目预计投入人力" {...formItemLayout}>
                {getFieldDecorator('hrPlan', {
                  rules: [{ required: true, message: '请输入项目预计投入人力(人天)！' }],
                  initialValue: this.props.modifyRecord.hrPlan
                })(
                  <Input type="number" min={0} step={1} placeholder="项目预计投入人力(人天)" addonAfter="人天" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目已经投入人力" {...formItemLayout}>
                {getFieldDecorator('hrAlready', {
                  rules: [{ required: true, message: '请输入项目已经投入人力(人天)！' }],
                  initialValue: this.props.modifyRecord.hrAlready
                })(
                  <Input type="number" min={0} step={1} placeholder="项目已经投入人力(人天)" addonAfter="人天" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目进度" {...formItemLayout}>
                {getFieldDecorator('progress', {
                  rules: [{ required: true, message: '请输入项目进度！' }],
                  initialValue: this.props.modifyRecord.progress
                })(
                  <Input type="number" min={0} max={100} step={1} placeholder="项目进度" addonAfter="%" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目预期交付时间" {...formItemLayout}>
                {getFieldDecorator('deliveryPlan', {
                  rules: [{ required: true, message: '请输入项目预期交付时间！' }],
                  initialValue: this.props.modifyRecord.deliveryPlan
                })(
                  <DatePicker placeholder="项目预期交付时间" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目是否延期" {...formItemLayout}>
                {getFieldDecorator('delay', {
                  rules: [{ required: true, message: '请选择项目是否延期！' }],
                  initialValue: this.props.modifyRecord.delay || false
                })(
                  <Select allowClear>
                    <Option value={true}>是</Option>
                    <Option value={false}>否</Option>
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem label="项目节点" {...formItemLayout}>
                {getFieldDecorator('notes', {
                  rules: [{ required: true, message: '请输入项目节点！' }],
                  initialValue: this.props.modifyRecord.notes
                })(
                  <Textarea autosize="true" placeholder="项目节点" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目延误节点" {...formItemLayout}>
                {getFieldDecorator('delayNote', {
                  initialValue: this.props.modifyRecord.delayNote
                })(
                  <Input placeholder="项目延误节点" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目延误责任部门" {...formItemLayout}>
                {getFieldDecorator('delayDepartment', {
                  initialValue: this.props.modifyRecord.delayDepartment
                })(
                  <Select allowClear>
                    {
                      this.props.departmentList.map((item, index) =>
                        <Option key={index} value={item.id}>{item.name}</Option>
                      )
                    }
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目延误原因" {...formItemLayout}>
                {getFieldDecorator('delayReason', {
                  initialValue: this.props.modifyRecord.delayReason
                })(
                  <Input placeholder="项目延误原因" />
                )}
              </FormItem>
            </Col>
        </Row>
        <Row>
          <Col className="butttn-group" span={24}>
            <Button type="primary" htmlType="submit">
                添加
            </Button>
            <Button style={{marginLeft: 15}} type="primary" onClick={this.close}>取消</Button>
          </Col>
        </Row>
    </Form>
    )
  }
}
export default Form.create()(WeeklyForm1);
